import React from "react";
// import {History,Location} from "@types"
import styles from "./main.module.css";
import {
  // useHistory,
  // useLocation,
  // useParams,
  Link,
  RouteComponentProps,
} from "react-router-dom";
import { UserInfoStore } from "../../stores/UserInfo.store";
import { inject, observer } from "mobx-react";
import Stept from "../../components/Stept";
import { InputNumber } from "antd";
import myHttp from "../../utils/myHttp";
import UserInfoModel, { urls } from "../../models/userInfo";
import { proxyHOST } from "../../utils/HOST";
// import { autorun } from "mobx";

export interface userInfoState {
  msg: string;
  num: number; //数值
  numbers: number[]; //一个number数组
}

export interface userInfoProps extends RouteComponentProps {
  //继承路由prop参数 获取路由信息
  name?: string;
  userInfoStore?: UserInfoStore;
}

@inject("userInfoStore")
@observer
export default class UserInfo extends React.Component<
  userInfoProps,
  userInfoState
> {
  state = { msg: "", num: 1, numbers: [1, 2, 3, 4, 5] };
  static defaultProps = {
    //设置props默认值方法
    name: "用户信息",
  };
  setNum(val: string | number | undefined) {
    // 设置数值

    if (typeof val === "number") {
      this.setState({ num: val });
    }
  }
  showHello() {
    if (this.state.msg && this.state.msg !== "")
      return <span>{this.state.msg}</span>;
    else return <span>你好</span>;
  }
  getUserInfo(){
    let userInfoStore = this.props.userInfoStore as UserInfoStore;
    myHttp.get(urls.HQYHSJ, UserInfoModel,undefined,proxyHOST).then((rep) => {
      if (rep.data) {
        let userInfo = rep.data;
        userInfoStore.setUserInfo(userInfo);
 
      }
    });
  }
  // constructor(props: userInfoProps) {
  //   super(props);
  // }

  render() {
    // let history = useHistory(); //函数组件才能用
    // let location = useLocation(); //函数组件才能用
    // let params = useParams(); //函数组件才能用
    // console.log(this);
    let userInfoStore = this.props.userInfoStore as UserInfoStore;
    let userInfo = userInfoStore.userInfo;
 
    return (
      <div className={styles.userInfo}>
        <p>姓名：{userInfo ? userInfo.name : ""}</p>
        <p>性别：{userInfo ? userInfo.sex : ""}</p>
        <p>电话：{userInfo ? userInfo.phone : ""}</p>
        <p>邮箱：{userInfo ? userInfo.mail : ""}</p>
        <p>地址：{userInfo ? userInfo.address : ""}</p>
        <Stept
          defaultNum={this.state.num}
          onChange={this.setNum.bind(this)}
        ></Stept>
        <InputNumber
          min={1}
          max={10}
          value={this.state.num}
          // defaultValue={this.state.num}
          onChange={this.setNum.bind(this)}
        />
        <div>
          {/* 列表渲染遍历数据 */}
          {this.state.numbers.map((item) => (
            <span key={item}>{item}</span>
          ))}
        </div>
        <div>{this.showHello()}</div>
      </div>
    );
  }
  componentDidMount(){
    this.getUserInfo()
  }
}
